<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Get_group } from '@/api/index'
const router = useRouter();
// 导航回退
const onClickLeft = () => {
    router.push('/home')
}
const data: any = ref([]);
const checked = ref(true);
onMounted(async () => {
    const res = await Get_group();
    // data.value = res.data.data.filter((t: any) => t.status !== null)
    const zong: any = [];
    console.log(res.data.data.data);
    res.data.data.data.forEach((t: any, k: number) => {
        zong.push({
            id: t.group_id,
            type: t.group_status,
            img: t.img,
            name: t.house_name + t.group_title,
            dz: t.city + t.county + t.address,
            date: t.start_time,
            num: '1' + k + 2,
            car: '京A34553',
            phone: '15248373934',
            end_date: t.end_time
        })
    })
    const bm = zong.filter((t: any) => t.type == '0');
    const yb = zong.filter((t: any) => t.type == '1');
    data.value = [...yb, ...bm]
})
</script>
<template>
    <div class="box">
        <header>
            <van-icon name="arrow-left" class="icon" @click="onClickLeft" />
            团购
        </header>
        <main>
            <div class="item" v-for="(item, index) in data" :key="item.id">
                <div v-if="item.type != 0">
                    <div style="background: skyblue;border-radius: 10px;">
                        <img style="width: 100%;display: block;margin: auto;" :src="item.img" />
                    </div>
                    <p style="font-size: 18px;font-weight: bold;">{{ item.name }}</p>
                    <p>{{ item.dz }}</p>
                    <p>活动时间：{{ item.date }} <span style="float: right; font-size: 12px;">已报名：{{ item.num }}人</span></p>
                    <p style="width: 100%;">
                        <van-switch v-model="checked" />
                        <van-button style="width: 50px;float: right;" type="default">删除</van-button>
                        <van-button style="width: 50px;float: right;" type="primary">开团</van-button>
                    </p>
                </div>
                <div class="item" v-else>
                    <div style="background: skyblue;border-radius: 10px;">
                        <img style="width: 100%;display: block;margin: auto;" :src="item.img" />
                    </div>
                    <p style="font-size: 18px;font-weight: bold;">{{ item.name }}</p>
                    <p>集合地点：{{ item.dz }}</p>
                    <p>车辆牌号：{{ item.car }}</p>
                    <p>集合时间：{{ item.date }}</p>
                    <p>联系电话：{{ item.phone }} <span style="float: right; font-size: 12px;">已报名：{{ item.num }}人</span></p>
                </div>
            </div>
        </main>
    </div>
</template>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

.box {
    header {
        width: 100vw;
        height: 50px;
        background-color: #2391f9;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        position: relative;

        .icon {
            position: absolute;
            top: 50%;
            left: 10%;
            transform: translate(-50%, -50%);
        }
    }

    main {
        width: 100%;
        height: calc(100% - 50px);

        .item {
            width: 90%;
            margin: 10px auto;
            line-height: 30px;
            position: relative;
            border-radius: 10px;
            background: #f0f0f0;
            padding: 5px;
            box-sizing: border-box;
        }

        img {
            border-radius: 10px;
        }
    }
}
</style>